<template>
    <div>
        <div id="toast">
            <span class="vue-toast">
                <i>{{msg}}</i>
            </span>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "wwww"
    };
  }
};
</script>

<style scoped>
#toast {
  position: fixed;
  width: 100vw;
  bottom: 15vh;
  animation: mymove 500ms;
}
.vue-toast {
  display: block;
  margin: 0 auto;
  text-align: center;
}
i {
  background-color: #615d5d;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8rem;
}
@keyframes mymove {
  from {
    bottom: 0vh;
  }
  to {
    bottom: 15vh;
  }
}
</style>